﻿<% layout('/layouts/default.html', {title: 'about', libs: ['validate']}){ %>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <!-- <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> -->
    <!-- 添加 favicon icon -->
    <meta name="renderer" content="webkit">
    <meta name="design-width" content="750">
    <title>诊所详情</title>
    <link rel="stylesheet" href="${ctxStatic}/css/swiper.min.css">
    <link rel="stylesheet" href="${ctxStatic}/css/public.css" />
    <script src="${ctxStatic}/js/font-size.js"></script>


    <div class="full-background">
        <main class="main">
            <div class="clinic-details">
                <div class="swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href="#"><img src="${ctxStatic}/img/6d264_0_750_300.jpg" alt=""></a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#"><img src="${ctxStatic}/img/585a4_1_750_300.jpg" alt=""></a>
                            </div>
                            <div class="swiper-slide">
                                <a href="#"><img src="${ctxStatic}/img/e1576_2_750_300.jpg" alt=""></a>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <h1> ${clinic.name}</h1>
                <div class="info">
                    <div class="tel">
                        <a href="tel:021-88889999" class="icon">021-88889999</a>
                    </div>
                    <div class="location">
                        <div class="text icon"> ${clinic.address}</div>
                        <a class="btn-go" href="#">导航</a>
                    </div>
                </div>
                <div class="describe">
                    <p> ${clinic.remarks}</p>
                </div>
                <dl class="list-c">
                    <dt>
                        <h3>诊所科室</h3>
                        <!-- <a href="#">更多></a> -->
                    </dt>
                    <% for(var c in list){ %>
                    <dd>
                        <a href="${ctx}/../fl/about/department?clinicId=${clinic.id}&department=${c}">${@DictUtils.getDictLabel('fl_department', c, '未知')}</a>
                    </dd>
                    <% } %>
                </dl>
            </div>
        </main>
    </div>
    <div class="footer-layout-por">

    </div>
    <div class="footer-layout pc">
        <div href="#" class="item child">
            <div class="icon">
                <img src="${ctxStatic}/img/6e896_6_56_56.png" alt="" class="w56">
            </div>
            <div class="text">走进富乐</div>
            <div class="drop-down">
                <div>
                    <a href="./about.html">富乐诊所</a>
                    <a href="#">新闻动态</a>
                    <a href="#">热门活动</a>
                </div>
            </div>
        </div>
        <a href="./appoinment.html" class="item">
            <div class="icon">
                <img src="${ctxStatic}/img/4bf8d_7_50_49.png" alt="" class="w50">
            </div>
            <div class="text">我要预约</div>
        </a>
        <a href="./center.html" class="item">
            <div class="icon">
                <img src="${ctxStatic}/img/e289f_8_41_55.png" alt="" class="w41">
            </div>
            <div class="text">
                我的
            </div>
        </a>
    </div>
<% } %>
    <script src="${ctxStatic}/js/jquery.min.js"></script>
    <script src="${ctxStatic}/js/swiper.min.js"></script>
    <!-- <script src='js/js.js'></script> -->
    <script>
        $('.footer-layout .item').on('click', function (e) {
            $(this).siblings().removeClass('active').find('.drop-down').slideUp();
            $(this).toggleClass('active')
            if ($(this).hasClass('child')) {
                $(this).children('.drop-down').slideToggle();
            }
        })
        $('.full-background').one('click', function () {
            $('.footer-layout .item .drop-down').slideUp();
            $('.footer-layout .item').removeClass('active');
        })

        document.querySelector('.swiper .swiper-container') && new Swiper('.swiper .swiper-container', {
            autoplay: 5000,
            loop: true,
            pagination: '.swiper-pagination',
            autoplayDisableOnInteraction: false,
        })
        $('.list-c').on('click', 'dd', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
    </script>
</body>

</html>
